<template>
  <a-row :gutter="[16,16]">
    <a-col :span="6">
      <div class="cart employee">
        <i class="fa fa-users fa-4x" />
        <div class="cart-right">
          <div class="right-text">{{ $t("员工总人数") }}</div>
          <div class="right-number employeeNo">{{ DigAnimation(employeeNo,
            "employeeNo") }}</div>
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="cart position">
        <i class="fa fa-address-card fa-4x"/>
        <div class="cart-right">
          <div class="right-text">{{ $t("岗位数量") }}</div>
          <div class="right-number positionCount">{{ DigAnimation(macroData?.positionCount,
            "positionCount") }}
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="cart unit">
        <i class="fa fa-sitemap fa-4x" />
        <div class="cart-right">
          <div class="right-text">{{ $t("部门") }}</div>
          <div class="right-number buCount">{{ DigAnimation(macroData?.buCount, "buCount") }}</div>
        </div>
      </div>
    </a-col>
    <a-col :span="6">
      <div class="cart company">
        <i class="fa fa-building fa-4x" />
        <div class="cart-right">
          <div class="right-text">{{ $t("公司数量") }}</div>
          <div class="right-number companyAni"> {{ DigAnimation(macroData?.enterpriseCount, "companyAni") }}</div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { DigAnimation } from '@/utils/common/common'
import { GetWebPositionStatistic } from '@/api/home/index'
import emitter from "@/utils/bus";
let macroData = ref({})
let employeeNo = ref(0)
const getCompanyInfo = async () => {
  const { data } = await GetWebPositionStatistic()
  macroData.value = data ?? {}
}
emitter.on("employeeNo", (res: any) => {
  employeeNo.value = res ?? 0
});
onMounted(() => {
  getCompanyInfo()
})
</script>

<style scoped lang="scss">
.cart {
  width: 100%;
  height: 95px;
  padding: 16px 24px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
}
.cart-right {
  height: 100%;
  text-align: right;
}
.right-text {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 16px;
  font-weight: bolder;
}
.right-number {
  color: #ffffff;
  font-size: 24px;
  font-weight: bolder;
}
.employee {
  background-color: #1c84c6;
}
.position {
  background-color: #1ab394;
}
.unit {
  background-color: #23c6c8;
}
.company {
  background-color: #f8ac59;
}
.fa-4x {
  color: #ffffff;
  font-size: 42px;
}
</style>
